<template>
	<div class="pay-box" :style="`height: ${screenHeight}px`">
		<!--<div class="pay-box-scroll" :style="isFocus ? 'height: 130vh' : ''">-->
    <div class="pay-box-scroll" style='display:flex;flex-direction:column;height:100%;'>
			<m-header :hasBack="true" :hasTitle="true" title="订单支付" :goBack="goBack"></m-header>
			<div class="centent payment_con" style='flex:1;overflow:auto'>
				<div class="amount_con aui-margin-b-15">
					<h1>共需要支付</h1>
								<h2>¥<span id="amountText">{{money}}</span></h2>
					<h3 v-if="walletMoneyState" style="color: red;font-size: 12px;">(钱包已付：￥<span>{{walletMoney}}</span>)</h3>
					 <count-down :orderType="orderType" :endTime="autoCancelTime" @cancel="cancel"></count-down>
				</div>
				<!--付款方式1-->
				<div class="aui-content aui-margin-b-15">
					<ul class="aui-list aui-list-in">
						<li class="aui-list-header">
							支付方式
						</li>
						<li class="aui-list-item" v-if="isSecondPay && paywayList.length && parseFloat(walletMoney) !== 0" style="display: flex;align-items: center;">
							<span>已选用钱包金额：<font style="color: #EF5423">￥{{walletMoney}}</font></span>
						</li>
						<!-- 钱包支付 -->
						<li class="aui-list-item" v-if="!isSecondPay" v-show="paywayList.length" @click="emitSetPayWay(wallet)">
							<div class="aui-list-item-label-icon">
								<i class="icon njfont nj-qianbao" style="font-size: 1.8rem; color: rgb(234, 79, 47);"></i>
							</div>
							<div class="aui-list-item-inner">
								<div class="pay_info_box pay_info_box_wallet">
									<span class="pay_info_title">钱包支付</span>
									<span class="pay_info_text">余额: <font class="pay_info_balance">{{"￥" + walletBalance}}</font></span>
								</div>
								<div class="aui-list-item-right">
									<div class="aui-list-item-right">
										<input type="radio" class="aui-radio" :disabled="orderType === 12 || !parseFloat(walletBalance)" :checked="walletChoosed">

									</div>
								</div>
							</div>
						</li>
						<!-- 从后台拿到的支付列表 -->
						<li class="aui-list-item" v-for="(item, index) in paywayList" :key="index" @click="emitSetPayWay(yizhifu, item.payment_type_id)">
							<div class="aui-list-item-label-icon">
								<!-- <span>y{{index}}y</span> -->
								<img v-if="index == 2" src="static/image/icon_yx.png" style="width: 2rem;height:1.4rem;"/>
								<i v-else class="icon njfont" :class="icons[item.code].class"
									:style="{fontSize: '1.8rem', color: icons[item.code].color}">
								</i>
								<!-- <img src="static/image/pay-img.png" style="width: 1.6rem;"/> -->
								<!-- <img src="static/image/icon_yx.png" style="width: 1.6rem;"/> -->
							</div>
							<div class="aui-list-item-inner">
								<div class="pay_info_box">
									<span class="pay_info_title">{{item.name}}</span>
									<!-- <span class="pay_info_text">微信/支付宝</span> -->
								</div>
								<div class="aui-list-item-right">
									<div class="aui-list-item-right">
										<input type="radio" class="aui-radio" :checked="item.payment_type_id === paymentId">
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--付款方式1 end-->
				<div class="pay_prompt_box" v-if="!isSecondPay" v-show="walletChoosed">
					<span>钱包支付</span>
					<!-- <input v-model="getWalletMoney"
						@focus.stop="walletInputFocusEvent"
						@blur.stop="walletInputBlurEvent"
						class="pay_prompt_input"
						ref="walletMoneyInput"
						type="text"/> -->
					<span class="pay_prompt_span">{{walletMoney}}</span>
				</div>
				<div class="pay_prompt_box" v-show="yizhifuChoosed">
					<span>{{thirdPaywayName}}</span>
					<span class="pay_prompt_span">{{thirdPayMoney}}</span>
				</div>
			</div>
      <!--确定-->
      <div :class="orderType === orderTypeCode.normal && isApp ? 'showpfo' : ''" class="lijixiadan">
        <pfoCom class="pay-bottm-btn" :orderNo="orderNo" v-if="orderType === orderTypeCode.normal && isApp && !IsOrderPage">
          <div class="" id="payForOthers">找人代付</div>
        </pfoCom>
        <div  class="pay-bottm-btn" id="goPay" @click="pay" >立即支付</div>
      </div>
      <!--确定 end-->
		</div>
	</div>
</template>

<script>
import Header from "../../real-containers/header";
import * as way from "../../config/pay-way";
import { mapMutations, mapGetters } from "vuex";
import { Toast } from "../../utils/toast";
import pfoCom from "../payForOthers/pfo.vue";
import * as orderTypeCode from "../../config/orderTypeCode/index";
import countdown from "../pay/countdown.vue";
export default {
	props: {
		pageType: {
			type: String,
			default: "android"
		},
		money: {
			type: [Number, String],
			default: 0.01
		},
		payClick: {
			type: Function,
			default: () => {}
		},
		// 支付取消按钮置灰操作
		payCancel:{
			type: Function,
			default: () => {
			}
		},
		goBack: {
			type: Function,
			default: () => {}
		},
		//用钱包支付的金额
		walletMoney: {
			type: [Number, String],
			default: 0
		},
		walletMoneyState: {
			type: Boolean,
			default: false
		},
		walletBalance: {
			type: [Number, String],
			default: "0.00"
		},
		//翌支付需要支付的金额
		thirdPayMoney: {
			type: [Number, String],
			default: "0.00"
		},
		//orderType
		orderType: {
			type: Number,
			default: -1
		},
		//新的支付流程所需的支付列表
		paywayList: {
			type: Array,
			default() {
				return [];
			}
		},
		orderNo: {
			type: [String, Object],
			default: ""
		},
		autoCancelTime: {
			type: Number
		},
		//钱包余额是否大于等于订单总额
		fullWalletPay: {
			type: Boolean,
			default: false
		},
		//当前订单是否是第二次或二次以上进入到支付页面
		isSecondPay: {
			type: Boolean,
			default: false
		},
		//从第三方支付页面返回时立刻锁钱包
		// immediatelyLockWallet: {
		// 	type: Boolean,
		// 	default: false
		// }
	},
	data() {
		return {
			walletMoneyData: this.walletMoney,
			//最近的一次正确的值
			lastRightMoney: 0,
			isFocus: false,
			icons: {
				AliPay: { class: "nj-zhifubao1", color: "#2595cc" },
				WeChatPay: { class: "nj-weixinzhifu2", color: "#22a822" },
				// UnionPay: { class: "nj-yinlian", color: "#014888" },
				UnionPay: { },
				SwiftPass: { class: "nj-weixinzhifu2", color: "#22a822" }
			},
			orderTypeCode: {
				...orderTypeCode
			},
			orderIsClosed: false,
			IsOrderPage:false,
		};
	},
	computed: {
		...mapGetters("gw", ["getPayWay", "getPaymentId"]),
		yizhifu() {
			return way.yizhifu;
		},
		wallet() {
			return way.wallet;
		},
		yizhifuChoosed() {
			//选用翌支付的情况为，数组长度为2
			if (this.getPayWay.length === 2) {
				return true;
			}
			//数组长度为1时，这个元素不是wallet
			if (
				this.getPayWay.length === 1 &&
				this.getPayWay.join(",").indexOf(way.wallet) === -1
			) {
				return true;
			}
			return false;
			// console.log("this.getPayWay", this.getPayWay);
			// return this.getPayWay.join(",").indexOf(way.yizhifu) > -1;
		},
		paymentId() {
			return this.getPaymentId;
		},
		walletChoosed() {
			// console.log("sdsds", this.getPayWay);
			return this.getPayWay.indexOf(way.wallet) > -1;
		},
		//获取屏幕高度
		screenHeight() {
			return window.environment === "edit" ? "600" : window.innerHeight;
		},
		getWalletMoney: {
			set(val) {
				// console.log("getWalletMoney", val);
				let reg = /^\d*\.{0,1}\d{0,2}$/; //校验符合数字
				if (val === "") {
					this.walletMoneyData = val;
					this.$emit("changeWalletMoney", "");
				} else if (
					reg.test(val) &&
					parseFloat(val) <= parseFloat(this.money) &&
					parseFloat(val) <= parseFloat(this.walletBalance)
				) {
					// console.log("输入的格式合法，开始赋值");
					this.walletMoneyData = val;
					this.$emit("changeWalletMoney", val);
				} else {
					// console.log("进入到else");
					this.$refs.walletMoneyInput && (this.$refs.walletMoneyInput.value = this.walletMoneyData);
				}
			},
			get() {
				return this.walletMoneyData;
			}
		},
		//当前选中的第三方支付的名称
		thirdPaywayName() {
			for (let i = 0; i < this.paywayList.length; i++) {
				if (this.paywayList[i].payment_type_id === this.paymentId) {
					return this.paywayList[i].name;
				}
			}
			return "";
		},
		isApp() {
			// return false;
			// return true;
			return window.cordova ? true : false;
		}
	},
	components: {
		"m-header": Header,
		pfoCom: pfoCom,
		"count-down": countdown
	},
	methods: {
		...mapMutations("gw", ["setPayWay", "setPaymentId"]),
		walletInputFocusEvent() {
			var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android
			if (!isAndroid) {
				return;
			}
			this.isFocus = true;
		},
		walletInputBlurEvent() {
			this.isFocus = false;
		},
		//设置支付方式和支付id
		emitSetPayWay(val, id) {

			// 钱包和翌支付分开设置
			// 设置钱包的
			if (val === way.wallet) {
				if (this.orderType === 12 || !parseFloat(this.walletBalance)) return;
				//已经有钱包了，取消掉
				if (this.getPayWay.indexOf(val) > -1) {
					this.getPayWay.splice(this.getPayWay.indexOf(val), 1);
					this.setPayWay(this.getPayWay);
					return;
				}
				//如果钱包足够完全支付
				if (this.fullWalletPay) {
					this.setPayWay([val]);
					//取消支付Id
					this.setPaymentId("");
					return;
				}
				this.getPayWay.push(val);
				this.setPayWay(this.getPayWay);
			} else {
				//设置翌支付的
				// if (this.fullWalletPay) return;
				// console.log();
				if (this.getPayWay.indexOf(id) > -1) {
					//已经有该支付方式
					this.getPayWay.splice(this.getPayWay.indexOf(id), 1);
					this.setPayWay(this.getPayWay);
					//取消支付Id
					this.setPaymentId("");
					return;
				}
				//如果钱包足够完全支付
				if (this.fullWalletPay) {
					this.setPayWay([id]);
					//设置支付id
					this.setPaymentId(id);
					return;
				}
				//支付方式的数组中已经有两种了，则要对翌支付进行替换
				if (this.getPayWay.length === 2) {
					let index = this.getPayWay.indexOf(way.wallet) === 0 ? 1 : 0;
					this.getPayWay[index] = id;
					this.setPayWay(this.getPayWay);
					//设置支付id
					this.setPaymentId(id);
					return;
				}
				//支付方式的数组中只有一种翌支付的，则进行替换
				if (
					this.getPayWay.length === 1 &&
					this.getPayWay.indexOf(way.wallet) === -1
				) {
					this.getPayWay[0] = id;
					this.setPayWay(this.getPayWay);
					//设置支付id
					this.setPaymentId(id);
					return;
				}
				this.setPaymentId(id);
				this.getPayWay.push(id);
				this.setPayWay(this.getPayWay);
			}
		},
		pay() {
			if (this.orderIsClosed) {
				Toast({
					duration: 1000,
					type: "warn",
					message: "订单已关闭"
				});
				return;
			}
			if (this.payWayComputed === "-1") {
				Toast({
					duration: 1000,
					type: "warn",
					message: "请选择支付方式"
				});
				return;
			}
			this.payClick();
		},
		//倒计时结束后调用的方法
		cancel() {
			this.orderIsClosed = true;
			// this.payCancel();
			
		}
	},
	watch: {
		walletMoney(newVal) {
			// console.log("walletMoney---newVal", newVal)
			this.getWalletMoney = newVal;
		}
	},
	created() {
		console.log("this.orderType", this.orderType);
		this.IsOrderPage = this.$route.params.IsOrderPage || false
		// console.log("this.getPayWay", this.getPayWay.join);
	}
};
</script>

<style scoped>
.pay-box {
	/* height: 100%; */
	overflow: hidden;
}
.lijixiadan {
	padding: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 99;
	height: 2.5rem;
	background: #ffffff;
	display: flex;
	border-top: 1px solid #ededed;
}
.aui-list-item-label-icon {
	width: 3rem;
	display: flex;
	justify-content: center;
}
.pay_info_box {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
}
.pay_info_box_wallet {
	display: flex;
	flex-flow: row nowrap;
	flex: 1;
	justify-content: space-between;
	align-items: center;
}
.pay_info_title {
	color: #000;
	font-weight: bold;
	font-size: 0.7rem;
}
.pay_info_balance {
	color: #ef5423;
}
.pay_info_text {
	font-size: 12px;
}
.pay_prompt_box {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	background: #fff;
	align-items: center;
}

.pay_prompt_box:first-of-type {
	border-bottom: 1px solid #ddd;
}
.pay_prompt_input,
.pay_prompt_span {
	/* text-align: right; */
	color: #000;
	font-size: 0.8rem;
	font-weight: bold;
	width: 4rem;
	border-bottom: 1px solid #ddd;
	/* padding-right: 0.5rem; */
	border-radius: 3px;
	text-align: center;
}
.pay_prompt_span {
	border-bottom: unset;
}
.showpfo {
	/* height: 5.2rem; */
}
.pay-bottm-btn {
	margin: 0;
	flex: 1;
	line-height: 2.5rem;
	font-size: 1rem;
}
#goPay {
	background: #ef5423;
	color: #ffffff;
}
.amount_con h1 {
	font-size: 0.9rem;
}
.amount_con h2 {
	font-size: 1rem;
	font-weight: bold;
}
#payForOthers {
	font-size: 1rem;
}
</style>
